<template>
  <div class="relation">
    <!--按钮、搜索-->
    <p class="opr">
      <el-input
              placeholder="搜索发布商"
              v-model="query" size="mini" class="left searchIpt" @keyup.enter.native="getUsersfollow(true)">
        <i slot="suffix" class="el-input__icon el-icon-search" @click="getUsersfollow(true)"></i>
      </el-input>
      <el-select v-model="status" placeholder="关联状态" size="mini" @change='getUsersfollow(true)'>
        <el-option label="关联状态" value=""></el-option>
        <el-option label="关联中" value="1"></el-option>
        <el-option label="已关联" value="2"></el-option>
        <el-option label="关联未通过" value="3"></el-option>
      </el-select>
      
      <el-button type="primary" icon="el-icon-plus" size="mini" class="v_right" @click="show">添加关联</el-button>
    </p>
    <!-- 操作区-->
  <!--   <p class="opr flexOpr">
      <span class="count">发布商（{{inde}}）</span>
    </p> -->
    <!--表格-->
    <el-table
            :data="tableData"
            :empty-text="empty"
            style="width: 100%">
      <el-table-column
              width = "120"
              label="发布商">
        <template slot-scope="scope">
          <p class="price">{{ scope.row.name }}</p>
          <!-- <p class="price">{{scope.row.content}}</p> -->
        </template>
      </el-table-column>
      <el-table-column
              prop="description"
              label="简介">
              <template slot-scope="scope">
                  <p v-if="scope.row.description==null" >暂无简介</p>
                  <p v-if="scope.row.description!=null" >{{ scope.row.description }}</p>
              </template>
      </el-table-column>
      <el-table-column
              prop="adminUserPhone"
              label="手机号">
      </el-table-column>
      <el-table-column
              label="关联状态">
              <template slot-scope="scope">
          <p v-if="scope.row.status==1">关联中</p>
          <p v-if="scope.row.status==2">已关联</p>
          <p v-if="scope.row.status==3">关联未通过</p>
        </template>
      </el-table-column>
      <el-table-column
              prop="createTime"
              label="关联时间">
              <template slot-scope="scope">
                 <p>{{scope.row.createTime | stampFormate2}}</p>
               </template>
      </el-table-column>
    <!--   <el-table-column
              label="操作">
              <template slot-scope="scope">
                  <p>{{scope.row.totalPv - scope.row.pv}}</p>
              </template>
      </el-table-column> -->
    </el-table>
    <!--分页-->
    <div class="v_paging">
        <el-pagination
            background
           layout="total, sizes, prev, pager, next, jumper"
           :current-page.sync="currentPage"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :total="inde">
    </el-pagination>
   </div>
    <!--弹框-->
    <div class="v_mask" v-if="v_mask==true">
       <div class="v_maskcon">
         <p>请输入邀请码 : </p>
         <div class="v_maskipt"><input type="tel" placeholder="邀请码" v-model="code"/></div>
         <div class="v_maskPrompt">
           <p v-if="v_htmlx!=''">{{v_htmlx}}</p>
         </div>
         <div class="v_maskbtn clearfix">
           <div class="v_maskbtnl" @click="hide()">取消</div>
          <div class="v_maskbtnr" @click="postUsersfollow">关联</div>
         </div>
       </div>
    </div>
<!--     <el-dialog
            :title="dialog.title"
            :modal="false"
            :visible.sync="centerDialogVisible"
            width="30%"
            center>
      <div v-if="dialog.oprTyp ==2">
        <el-button size="mini" type="primary" @click="isPass(2)">同意</el-button>
        <el-button size="mini" @click="isPass(3)">拒绝</el-button>
      </div>
      <span v-if="dialog.oprTyp ==1">删除后不可恢复，确定删除吗？</span>
      <span v-if="dialog.oprTyp ==1" slot="footer" class="dialog-footer">
            <el-button size="mini" @click="centerDialogVisible = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="handleOk">确 定</el-button>
          </span>
    </el-dialog> -->
  </div>
</template>
<script>
    import {commonService} from '../../service/commonService'
    import {common} from '../../assets/js/common/common'

  export default {
    props: [],
    data () {
      return {
        // 操作区
        status: '', // 选择需求状态
        query: '', // 查询条件
        dicId: '', //行业状态
        // 列表
        tableData: [], //列表数据
        empty:'加载中...',
        // 分页
        currentPage:1,
        inde:1,
        pages:{
           no:1,
           size:10,
        },
        // 弹层
        v_mask:false,
        v_htmlx:'',
        code:'',
        // dialog: {
        //   title: '',
        //   content: '',
        //   rows: '',
        //   index: '',
        //   id: '',
        //   oprTyp: 0 //操作类型：1.删除；2.审核
        // },
        centerDialogVisible: false, // 弹框
      }
    },
    // components: {pagination},
    mounted () {
      // let that = this;
      // that.getList();
      this.getUsersfollow()
    },
    methods: {
      //分页
      handleSizeChange(val){
          this.pages.size=val
          this.getUsersfollow()
      },
      handleCurrentChange(val){
          this.pages.no=val
          this.getUsersfollow()
      },
      // 弹出层
      show:function(){
                this.v_mask=true
                 this.code=''
          },
      hide:function(){
               this.v_mask=false
          },
      //获得列表
      getUsersfollow (type){
        let that = this;
         if(type==true){
           that.pages.no=1
           that.currentPage=1
         }
        commonService.getUsersfollow({pageNo: that.pages.no, pageSize:that.pages.size,namePhone:that.query,status:that.status}).then(function (res) {
                   console.log(res)
                  if(res.data.code==200){
                          that.tableData=res.data.datas.records
                          that.inde=res.data.datas.total
                          that.empty="暂无数据"
                  }
        });
      },
       // 新增关联
          postUsersfollow:function(){
            let that=this
              if(that.code==''){
                 that.v_htmlx=""
                 setTimeout(() => {  
                                 that.v_htmlx=''
                             },2000) 
                     return false;
                 }
              commonService.postUsersfollow({code:that.code}).then(function(res){
                    if(res.data.code == 200){
                      that.hide()
                      that.getUsersfollow()
                    }else if(res.data.code == 522110){
                        that.v_htmlx="邀请码不存在"
                        setTimeout(() => {  
                                 that.v_htmlx=''
                             },2000) 
                    }else if(res.data.code == 522112){
                        that.v_htmlx="该发布商已经添加"
                        setTimeout(() => {  
                                 that.v_htmlx=''
                             },2000) 
                    }else{
                       that.v_htmlx=res.data.message
                        setTimeout(() => {  
                                 that.v_htmlx=''
                             },2000) 
                    }
              })

          },
    },
  }
</script>
<style lang="less">
    .relation{
       padding: 15px;
      .searchIpt {
        width: 250px;
      }
      .opr{
        margin-bottom: 20px;
        .v_right{
        	float: right;
        }
      }
      .has-gutter{
        background: #909399;
      }
      .el-table th{
        background: #eee;
      }
      .v_paging{
         margin-top: 20px;
         text-align: right;
      }
      .v_mask{
           position: fixed;
           top: 0;
           bottom: 0;
           left: 0;
           right: 0;
           z-index: 9999;
           width: 100%;
           height: 100%;
           background: rgba(0, 0, 0,0.4);
           .v_maskcon{
             position: fixed;
             top: 180px;
             left: 50%;
             margin-left: -200px;
             width: 400px;
             background: #fff;
             border:1px solid #eee;
             border-radius: 10px;
             p{
              font-size: 16px;
              line-height: 22px;
              padding: 20px 20px 10px;
              color: #333;
             }
             .v_maskipt{
                 padding: 0 20px;
                 input{
                    height: 34px;
                    width: 100%;
                    font-size: 14px;
                    color: #333;
                    border:1px solid #eee;
                    outline: none;
                   -webkit-appearance: none;
                    padding: 0 10px;
                 }
                 input::-webkit-input-placeholder{
                    color:#bbb;

                }
             }
             .v_maskPrompt{
               height: 24px;
               margin-bottom: 6px;
               p{
                 padding: 0 20px;
                 line-height: 24px;
                 font-size: 12px;
                 color: #ff3831;
               }
             }
           }
           .v_maskbtn{
               border-top: 1px solid #eee;
               height: 44px;
               .v_maskbtnl{
                float: left;
                  width: 50%;
                  line-height: 44px;
                  text-align: center;
                  color: #999;
                  font-size: 17px;
                  border-right: 1px solid #eee;
                  box-sizing: border-box;
               }
               .v_maskbtnr{
                float: left;
                  width: 50%;
                   line-height: 44px;
                  text-align: center;
                  color: #f29700;
                  font-size: 17px;
               }
           }
       }   
    }
  .price{width: 100%;white-space: nowrap; text-overflow:ellipsis; overflow:hidden;}
</style>